{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}

    投资

{% endblock %}

<link crossorigin="anonymous" integrity="sha384-O56yuCW/A5HUnuYx7ap1CJOXGXqaD3BxgKS9EDLgNUpNIE2BY7KsLJ+H5yr+CXpf" href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script crossorigin="anonymous" integrity="sha384-4nw0j+RUWePTdOeakgb+xtbxz7jrBdgRaawoEj0OC+4x2eLgEI53H4i9EfLyjy6k" src="https://lib.baomitu.com/element-ui/2.13.2/locale/vi.min.js"></script>



{% block content %}
    <style>
        /* 设置根属性，利于其他需要设定大小的属性使用rem */
        html {
            font-family: "Hiragino Sans GB", "Microsoft Yahei", arial, \5b8b\4f53, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
            font-size: 62.5%;
        }

        /* body的margin自带8px，因此需要清除 */
        body {
            margin: 0;
        }

        /* 很少需要全部属性都设置 */
        * {
            /*该属性让一个盒子大小，符合人的思维。
            width = padding + border + content;
            content = line-height * line-num;*/
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* 去除连接标签下划线和默认颜色 */
        a {
            text-decoration: none;
            color: #333;
        }

        textarea,
        input,
        button {
            outline: none;
        }

        /* 图片自适应 */
        img {
            width: 100%;
        }

        /* 清除浮动 */
        .clear::after {
            content: "";
            display: block;
            clear: both;
        }

        /* 以下为为老旧版本浏览器做的适配 */
        header, section, footer, aside, nav, article, figure {
            display: block;
        }

    </style>

    <style>
        tr, td {
            /* border: 0.1rem solid black; */
            margin: 0rem;
            width: 0.2rem;
        }

        table {
            width: 62.5rem;
            min-height: 50rem;
            margin: 0 0 0 0rem;
            /* border: 0.1rem solid black; */
        }

        div {
            margin: 1.25rem 1.25rem 1.25rem 1.25rem;
        }

        .introduce {
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        }

        .introduce p {
            font-size: 13px;
            padding: 10px 10px;
        }

        #app {
            width: 845px;
        }

        .chan {
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        }

        .button {
            float: right;
            margin-top: 18rem;
        }
    </style>

    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
    <div>

        <div class="introduce">
            <P> <h4> <strong>您现在的角色是A企业</h4></strong>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第二个游戏是<strong>个人投资游戏</strong>。为了赚取更多的现金，您仔细阅读下面的说明是很重要的。
在游戏结束后，游戏中的资金将按照固定的比例折算成现金发放给您。
          请您在阅读说明和做选择时认真思考，以确保您能够获得最大的收益。您不能通过快速选择影响整个游戏过程的持续时间。
          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;">本轮，您最终获得的现金和您的选择密切相关。</span>请仔细阅读下面的投资规则，
确保您的利益最大化。在开始游戏之前，会给您一些测试题，以帮助您检查是否理解说明。
            </P>
        </div>

        <div style="float: right;  clear:both;">
            <div id="app">
                <template>
                    <el-alert
                            title="注意："
                            type="warning"
                           description="尊敬的A企业代表，本次投资有风险，投资不保证本金和收益，投资后的收益取决于您的选择，您应充分认识投资风险，谨慎投资。"

                            show-icon>
                    </el-alert>
                </template>
            </div>


            <div class="chan">
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
                <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

                <table cellspacing="1" class="table table-bordered table-hover">
                    <tr>
                        <td colspan="2" align="center">游戏规则</td>
                    </tr>
                    <tr><span style="color: red;">游戏轮数并不固定，由系统随机确定轮次（轮次范围：1—10轮）。</span ></tr>
                    <tr>
                        <td>确认投资时间</td>
                        <td>每轮起始时（提交您的投资数额后，您在本轮不能取消或者更改投资数额。）</td>
                    </tr>
                    <tr>
                        <td>投资金额</td>
                        <td>每一轮，您可以在0-100万中选择任意的整数资金进行投资</td>
                    </tr>
                    <tr>
                        <td>投资企业</td>
                        <td>B1企业或B2企业<span style="color: red;">（注意：每轮只能选择一家企业进行投资）</span></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">收益规则</td>
                    </tr>
                    <tr>
                        <td>您的收益</td>
                        <td><strong>您的收益</strong>=<span style="color: red;">100万-投资给B（B1或B2）企业+B(B1或B2）企业的返还额</span></td>
                    </tr>
                    <tr>
                        <td>风险提示</td>
                        <td>当您投资给B（B1或B2）企业，B（B1或B2）企业运营后<strong>可以选择任意数额返还给您</strong></td>
                    </tr>
                    <tr>
                        <td>关于B（B1和B2）的说明</td>
                        <td><p>1、B1、B2企业经营者均参与了第一个团队挣钱游戏，您将可以看到B1、B2企业代表在第一轮游戏中的总体表现。<strong>B1、B2企业经营后返还给您的资金可能会与其在团队挣钱游戏中的表现有关，请认真思考。</strong></p>
2、B1、B2企业的赚钱能力不同。B1企业可以将您投给他的钱，<strong>经过运营后变为原来的3倍</strong>；B2企业可以将您投给他的钱，<strong>经过运营后变为原来的5倍</strong>。</td>
                    </tr>
                    

                </table>
            </div>


            <div class="list-group chan" style='color:red'>
           
                </a>
            </div>
        </div>
<br />
        <h4>请在仔细阅读完游戏规则后点击<span style="color: red;">Next按钮</h4></span> 
        {% next_button %}

    </div>


    <style>
        @import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
    </style>

    <script>
        new Vue({
            el: '#app'
        })
    </script>
{% endblock %}


